<template>
  <div class="Payorder">
    <section class="toolTop">
      <el-row :gutter="24" class="card_wrap">
        <el-col :span="24">
          <el-card class="box-card" shadow="hover">
            <div class="clearfix">
              <span class="title"></span>
            </div>
            <div class="text item">
              <div class="order_wrap">
                <div class="wrapTop">
                  <div class="payimgs"></div>
                  <div class="content">
                    <span class="title">订单提交成功！去付款咯~</span>
                    <span class="cancel">
                      请在
                      <span>0小时30分</span>内完成支付，超时后将提取订单
                    </span>
                  </div>
                  <div class="paytotal">
                    应付总额：
                    <span>{{money}}元</span>
                  </div>
                </div>
              </div>
              <div class="clearfix_line"></div>
              <div class="order_content">
                <ul>
                  <li>
                    订单号：
                    <span>{{orderNumber}}</span>
                  </li>
                  <li>商品名称：{{cloudtitleupgrade}} {{cloudShow}}</li>
                  <li>发票信息：电子发票 个人</li>
                </ul>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>
    <section class="toolBottom">
      <el-row :gutter="24" class="card_wrap">
        <el-col :span="24">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">选择支付方式</span>
            </div>
            <div class="text item">
              <span class="title">支付平台</span>
              <div class="selectBtn">
                <el-button class="zhifubao"></el-button>
                <el-button class="wechart"></el-button>
                <el-button class="paysucess" @click="payyilianBtn"></el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../../api/usermg/subpayment/payorder.js"></script>

<style lang="scss">
.Payorder {
  flex: 1;
  > section {
    margin: 10px 0px;
    &.toolTop {
      height: auto !important;
      padding-bottom: 17px;
      .card_wrap {
        border-radius: 5px;
        .el-card {
          border-radius: 5px;
          background-color: #1f2548;
          border: 1px solid #1f2548;
          .el-card__header {
            border-bottom: 1px solid #4b506c;
            .title {
              margin-top: 0%;
              margin-left: 0%;
              font-size: 2rem;
              color: #9da4af;
              font-weight: 500;
              justify-content: center;
              align-items: center;
            }
          }
          .el-card__body {
            .text {
              .order_wrap {
                color: #ffff;
                .wrapTop {
                  display: flex;
                  flex-direction: row;
                  .payimgs {
                    background: url(../../../assets/imgs/paysucess.png)
                      no-repeat;
                    width: 56px;
                    height: 50px;
                    background-size: 100% 100%;
                    border-radius: 9px;
                  }
                  .content {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-left: 1%;
                    width: 88%;
                    .title {
                      font-size: 25px;
                    }
                    .cancel {
                      color: #9da4af;
                      margin-top: 1%;
                      span{
                         color: #44abf5;
                      }
                    }
                  }
                  .paytotal {
                    color: #9da4af;
                    font-size: 16px;
                    span {
                      color: #f8666a;
                      font-size:30px;
                    }
                  }
                }
              }
              .clearfix_line {
                border-bottom: 1px solid #9da4af;
                margin-top: 10px;
                border-collapse: collapse;
                border-width: 1px;
                width: 96%;
                margin-left: 4%;
              }
              .order_content {
                ul {
                  li {
                    margin-left: 4.5%;
                    color: #9da4af;
                    margin-top: 1%;
                    span {
                      color: #44abf5;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    &.toolBottom {
      height: auto !important;
      padding-bottom: 17px;
      .card_wrap {
        border-radius: 5px;
        .el-card {
          border-radius: 5px;
          background-color: #1f2548;
          border: 1px solid #1f2548;
          .el-card__header {
            border-bottom: 1px solid #4b506c;
            .title {
              margin-top: 0%;
              margin-left: 0%;
              font-size: 2rem;
              color: #9da4af;
              font-weight: 500;
              justify-content: center;
              align-items: center;
            }
          }
          .el-card__body {
            .text {
              .title {
                font-size: 2rem;
                color: #9da4af;
              }
              .selectBtn {
                display: flex;
                flex-direction: row;
                margin-top: 20px;
                .zhifubao {
                  background: url(../../../assets/imgs/zhifubao.png) no-repeat;
                  width: 165px;
                  height: 50px;
                  background-size: 100% 100%;
                  border-radius: 9px;
                }
                .wechart {
                  background: url(../../../assets/imgs/wechart.png) no-repeat;
                  width: 165px;
                  height: 50px;
                  background-size: 100% 100%;
                  border-radius: 9px;
                }
                .paysucess {
                  background: url(../../../assets/imgs/yilian.png) no-repeat;
                  width: 165px;
                  height: 50px;
                  background-size: 100% 100%;
                  border-radius: 9px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
